<template>
  <div id="emp">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 报销管理</span>
    </div>
    <!-- 查询、添加请假以及表格 -->
    <div class="empInner">
      <!-- 查询请假列表 -->
      <div class="addEmp">
        <div class="dept">
          <span>报销类型:</span>
          <el-select v-model="select.accountType" placeholder="请选择">
            <el-option
              v-for="item in accountType"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dept">
          <span>申请状态:</span>
          <el-select v-model="select.accountStatus" placeholder="请选择">
            <el-option
              v-for="item in accountStatus"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="accountQuery" type="primary">查询</el-button>
      </div>
      <!-- 添加请假 -->
      <div class="newemp" @click="addAccountFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加报销</span>
      </div>
      <!-- 表格信息 -->
      <div class="table">
        <template>
          <el-table :data="tableData" height="700" border style="width: 100%">
            <el-table-column prop="accountNo" label="报销编号" width="120">
            </el-table-column>
            <el-table-column prop="accountName" label="申请人" width="150">
            </el-table-column>
            <el-table-column prop="accountType" label="报销类型" width="85">
            </el-table-column>
            <el-table-column prop="accountNumber" label="金额" width="180">
            </el-table-column>
            <el-table-column prop="accountTime" label="申请时间" width="180">
            </el-table-column>
            <el-table-column prop="accountStatus" label="申请状态" width="180">
            </el-table-column>
            <el-table-column label="操作列表" width="200">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <!-- 删除按钮 -->
                  <el-popconfirm
                    title="确定删除此报销吗？"
                    @confirm="accountRemove(scope.$index)"
                  >
                    <el-button
                      slot="reference"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-popconfirm>
                  <!-- 修改按钮 -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="editBtn(scope.$index)"
                    circle
                  ></el-button>
                  <!-- 查看详情按钮 -->
                  <el-button icon="el-icon-search" circle></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>

      <!-- 添加报销弹窗 -->
      <div class="addForm">
        <el-dialog
          title="员工新增"
          width="650px"
          :visible.sync="addAccountFormVisible"
        >
          <!-- 报销编号 -->
          <div class="empId">
            <span>报销编号</span>
            <el-input
              v-model="addAccount.accountNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 申请人 -->
          <div class="empName">
            <span>申请人</span>
            <el-input
              v-model="addAccount.accountName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 报销类型 -->
          <div class="empId">
            <span>报销类型</span>
            <el-select v-model="addAccount.accountType" placeholder="请选择">
              <el-option
                v-for="item in accountType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 报销金额 -->
          <div class="empId">
            <span>报销金额</span>
            <el-input-number
              v-model="addAccount.accountNumber"
              :precision="2"
              :step="0.1"
            ></el-input-number>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addEmpFormVisible = false">取 消</el-button>
            <el-button type="info" @click="accountAdd('草稿')">草 稿</el-button>
            <el-button type="primary" @click="accountAdd('提交')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- 修改报销弹窗 -->
      <div class="addForm">
        <el-dialog
          title="员工新增"
          width="650px"
          :visible.sync="editAccountFormVisible"
        >
          <!-- 报销编号 -->
          <div class="empId">
            <span>报销编号</span>
            <el-input
              v-model="editAccount.accountNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 申请人 -->
          <div class="empName">
            <span>申请人</span>
            <el-input
              v-model="editAccount.accountName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 报销类型 -->
          <div class="empId">
            <span>报销类型</span>
            <el-select v-model="editAccount.accountType" placeholder="请选择">
              <el-option
                v-for="item in accountType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 申请状态 -->
          <div class="empId">
            <span>申请状态</span>
            <el-select v-model="editAccount.accountStatus" placeholder="请选择">
              <el-option
                v-for="item in accountStatus"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 报销金额 -->
          <div class="empId">
            <span>报销金额</span>
            <el-input-number
              v-model="editAccount.accountNumber"
              :precision="2"
              :step="0.1"
            ></el-input-number>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editAccountFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="accountEdit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>


<script>
import {
  getAllAccount,
  addAccount,
  likeAccount,
  removeAccount,
  editAccount,
} from "@/api/accountAPI";
export default {
  name: "accountManager",
  data() {
    return {
      // 头部模糊查询信息
      select: {
        accountType: "",
        accountStatus: "",
      },
      // 表格数据
      tableData: [
        {
          accountId: "",
          accountNo: "",
          accountName: "",
          accountType: "",
          accountNumber: "",
          accountTime: "",
          accountStatus: "",
        },
      ],
      // 请假类型
      accountType: ["差旅费", "招待费", "办公费"],
      // 申请状态
      accountStatus: ["草稿", "已提交"],
      // 添加假期信息
      addAccount: {
        accountId: "",
        accountNo: "",
        accountName: "",
        accountType: "",
        accountNumber: 0,
        accountStatus: "",
      },
      addAccountFormVisible: false,
      // 修改请假数据
      editAccount: {
        accountId: "",
        accountNo: "",
        accountName: "",
        accountType: "",
        accountNumber: 0,
        accountStatus: "",
      },
      editAccountFormVisible: false,
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获得报销信息
    getAccount: function () {
      getAllAccount().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 添加报销信息
    accountAdd: function (mode) {
      if (mode == "草稿") {
        this.addAccount.accountStatus = "草稿";
      }
      if (mode == "已提交") {
        this.addAccount.accountStatus = "已提交";
      }
      addAccount(this.addAccount).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addAccountFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 模糊查询报销信息
    accountQuery: function () {
      likeAccount(this.select).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    // 删除报销信息
    accountRemove: function (index) {
      removeAccount(index).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.tableData.splice(index, 1);
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    // 点击修改按钮
    editBtn: function (index) {
      if (this.tableData[index].accountStatus == "已提交") {
        this.$message({
          message: "该订单已提交，不允许修改",
          type: "error",
        });
        return;
      }
      this.editAccount = JSON.parse(JSON.stringify(this.tableData[index]));
      this.editAccountFormVisible = true;
    },
    //修改订单
    accountEdit: function () {
      editAccount(this.editAccount).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getAllAccount(0);
          this.editAccountFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getInfoByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getInfoByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getAccount();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
  },
};
</script>

<style lang="less" scoped>
#emp {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 内容
  .empInner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    .addEmp {
      display: flex;
      flex-direction: row;
      justify-content: start;
      .name,
      .dept {
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
      }

      .el-input {
        width: 200px;
      }
    }
    .newemp {
      margin-top: 20px;
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    .table {
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input,
      .el-textarea {
        width: 496px;
      }
      .empId,
      .empName {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input,
        .el-select,
        .el-textarea,
        .el-input-number {
          margin-left: 30px;
        }
      }
      .empName {
        .el-input {
          margin-left: 43px;
        }
      }
    }
  }
}
</style>